import './App.css';

import { SearchOutlined, 
  UploadOutlined, 
  CaretUpOutlined, 
  CaretDownOutlined, 
  FullscreenOutlined, 
  FullscreenExitOutlined  
} from '@ant-design/icons';

import {  Component  } from 'react';

import {DatePicker,
  Button,  
  message, 
  Table, 
  Checkbox, 
  Radio, 
  Result, 
  Collapse, 
  Spin, 
  Select, 
  Switch,
  Modal,
  Input,
  Space,
  Typography,
  Popover,
  BackTop  } from 'antd';
import Highlighter from 'react-highlight-words';
import * as XLSX from 'xlsx';
import ReactEcharts from 'echarts-for-react';
import Aechart from './Aechart.js';

const { Text } = Typography;
const RangePicker = DatePicker.RangePicker;

const { Panel } = Collapse;

const { Option } = Select;

const monthTokey = {
  1:'January',
  2:'February',
  3:'March',
  4:'April',
  5:'May',
  6:'June',
  7:'July',
  8:'August',
  9:'September',
  10:'October',
  11:'November',
  12:'December',
}

const keyTomonth = {
 'January':1,
  'February':2,
  'March':3,
  'April':4,
  'May':5,
  'June':6,
  'July':7,
  'August':8,
  'September':9,
  'October':10,
  'November':11,
  'December':12,
}

const monthChain = {
  January:'1月份',
  February:'2月份',
  March:'3月份',
  April:'4月份',
  May:'5月份',
  June:'6月份',
  July:'7月份',
  August:'8月份',
  September:'9月份',
  October:'10月份',
  November:'11月份',
}

const pieBg = {
  backgroundColor:'#0F1C46',
  minHeight: '100vh',
  height:'100%',
}

const childrenChain = [];
for (let i in monthChain) {
  childrenChain.push(<Option key={i}>{monthChain[i]}</Option>);
}

const style = {
  height: 40,
  width: 40,
  lineHeight: '40px',
  borderRadius: 4,
  backgroundColor: '#1088e9',
  color: '#fff',
  textAlign: 'center',
  fontSize: 14,
};

const ReactEchartsStyle = {
  display:'none'
}


class Excel extends Component {

  constructor(props) {
    super(props);
    
    this.state = {
      screenTags:false,
      ColNum:24,
      paginationCurrent:1,
      paginationpageSize:10,
      classifyColumns:[
        {
          title: 'H5事件分类',
          dataIndex: 'classify',
          align:'center'
        },
        {
          title: '统计',
          dataIndex: 'classifyNum',
          align:'center',
          sorter: {
            compare: (a, b) => a.classifyNum - b.classifyNum
          },
          render: (text, row, index) => {
            return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,2)}} >{text}</div>;
          },
        },
        {
          title: '问题分析',
          dataIndex: 'classifyDesc',
          align:'center',
          ellipsis: true,
          render: (text, row, index) => {
            let res = ""
            let strRes = ""
            if(text.length){
             let  strArr = Array.from(new Set(text))
             for(let i in strArr){
               res = `${res}${Number(i)+1}.${strArr[i]}`
               strRes = `${strRes} 
                (${Number(i)+1}).${strArr[i]}`
             }
            }
            return  <Popover className="Popover-box" placement="topRight"  content={strRes} trigger="click">
              {res}
          </Popover>;
          },
        },
      ],
      modelColums:[],
      collapseArr:['1','2','3','4'],
      uploaLoading:false,
      allData:[],
      classifyData:[],
      actionType:[],
      yearKey:[],
      totalTitle:'年度统计',
      totalInitstart:'',
      totalInitend:'',
      tatoldata: [], //总年表格
      yearTitle:'年月度统计',
      eventData: [], // 月度表格
      monthTitle:'月份统计',
      monthData:[], // 天表格
      dayscolumns:[],
      plainOptions:[
        { label: '柱形图', value: 'bar' },
        { label: '折线图', value: 'line' },
        { label: '圆饼图', value: 'pie' },
        { label: '环形图', value: 'piecircular' },
        { label: '曲面图', value: 'piearea' },
        // { label: '柱折线图', value: 'barline' },
        { label: '折面图', value: 'linearea' }
      ],
      optionArray:[],
      pieArray:[],
      checkedValues:['bar','pie','piecircular','piearea','linearea','line'], //'barline',
      pieTypevalue:1,
      radioOptions: [
        { label: '按年', value: 'year' },
        { label: '按月', value: 'month' },
        { label: '按天', value: 'days' },
      ],
      radioValue:'month',
      piePicker:'',
      mdChain:'January',
      ydChain:'January',
      visible:false,
      modalTabledata:[],
      modalTitle:'',
      searchText: '',
      searchedColumn: '',
      clearFilterarr:[]
    }
  };
  
  collapseCollapse = (collapseArr)=>{
    
    this.setState({
      collapseArr
    })
  };

  // 上传execl
  onImportExcel = file => {

    this.setState({
      uploaLoading:true
    })

    // 获取上传的文件对象
    const { files } = file.target;

    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    
    fileReader.onload = event => {

      try {

        const { result } = event.target;

        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });

        // 存储获取到的数据
        let data = [];

        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {

          if (workbook.Sheets.hasOwnProperty(sheet)) {

            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            // break; // 如果只取第一张表，就取消注释这行
          }
        }

        // 最终获取到并且格式化后的 json 数据
        message.success('上传成功！')

        let resKey = []

        for(let i in data){
          resKey.push(data[i]['影响分类']) // 统计分类
        }

        // 去重
        resKey = Array.from(new Set(resKey))

        resKey =  resKey.filter((item)=>{
          return item
        })

        this.setState({
          allData:data,
          actionType:resKey,
          uploaLoading:false
        })
        
        this.getKey(data)

      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        
        message.error(`出现错误！${e}`);
        this.setState({
          uploaLoading:false
        })
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  };

  // 表头函数
  monthcolumnsFn = (type)=>{
    return [
      {
        title: '',
        dataIndex: 'year',
        align:'center',
        render: (text, row, index) => {
          return (type === 1)?<div>{text}</div>:<div className="blue-color" onClick={()=>{this.dialogTable(row,index,0)}} >{text}</div>;
        },
      },{
        title: '1月',
        dataIndex: 'January',
        align:'center',
        sorter: {
          compare: (a, b) => a.January - b.January,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,1)}} >{text}</div>;
        },
      },
      {
        title: '2月',
        dataIndex: 'February',
        align:'center',
        sorter: {
          compare: (a, b) => a.February - b.February,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,2)}}>{text}</div>;
        },
      },
      {
        title: '3月',
        dataIndex: 'March',
        align:'center',
        sorter: {
          compare: (a, b) => a.March - b.March,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,3)}}>{text}</div>;
        },
      },
      {
        title: '4月',
        dataIndex: 'April',
        align:'center',
        sorter: {
          compare: (a, b) => a.April - b.April,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,4)}}>{text}</div>;
        },
      },
      {
        title: '5月',
        dataIndex: 'May',
        align:'center',
        sorter: {
          compare: (a, b) => a.May - b.May,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,5)}}>{text}</div>;
        },
      },
      {
        title: '6月',
        dataIndex: 'June',
        align:'center',
        sorter: {
          compare: (a, b) => a.June - b.June,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,6)}}>{text}</div>;
        },
      },
      {
        title: '7月',
        dataIndex: 'July',
        align:'center',
        sorter: {
          compare: (a, b) => a.July - b.July,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,7)}}>{text}</div>;
        },
      },
      {
        title: '8月',
        dataIndex: 'August',
        align:'center',
        sorter: {
          compare: (a, b) => a.August - b.August,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,8)}}>{text}</div>;
        },
      },
      {
        title: '9月',
        dataIndex: 'September',
        align:'center',
        sorter: {
          compare: (a, b) => a.September - b.September,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,9)}}>{text}</div>;
        },
      },
      {
        title: '10月',
        dataIndex: 'October',
        align:'center',
        sorter: {
          compare: (a, b) => a.October - b.October,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,10)}}>{text}</div>;
        },
      },
      {
        title: '11月',
        dataIndex: 'November',
        align:'center',
        sorter: {
          compare: (a, b) => a.November - b.November,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,11)}}>{text}</div>;
        },
      },
      {
        title: '12月',
        dataIndex: 'December',
        align:'center',
        sorter: {
          compare: (a, b) => a.December - b.December,
          multiple: 1,
        },
        render: (text, row, index) => {
          return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,12)}}>{text}</div>;
        },
      },
      {
        title: '环比增长',
        dataIndex: 'chainComparison',
        align:'center',
        sorter: {
          compare: (a, b) => a.chainComparison - b.chainComparison,
          multiple: 1,
        }
      },
    ]
  };

  // 根据年月获取
  getMonthDays = (year,month)=>{
    var thisDate = new Date(year,month,0); 
    return thisDate.getDate();
  };

  // 年度时间选择器
  totalSearchtime = (date, dateString)=>{
    let allData = this.state.allData
    let res  = []

    if(!dateString[0]&&!dateString[1]){
        
      res = allData
    }else{
      
      let s = Number(dateString[0])
      let e = Number(dateString[1])

      for(let i in allData){
        let  d = new Date(allData[i]['日期']).getFullYear()
        if((d>=s)&&(d<=e)){
          res.push(allData[i])
        }
      }

    }
    this.getKey(res)
  }

  // 事件分类时间选择
  rangePickerChange = (dates,dateStrings)=>{
    let allData = this.state.allData
    let [data,stime,etime] = [[],dateStrings[0],dateStrings[1]]
    let ST = new Date(`${stime}-01`).getTime();
    let Nd = new Date(etime);
    let ed = this.getMonthDays(Nd.getFullYear(),(Nd.getMonth()+1))
    let ET = new Date(`${etime}-${ed}`).getTime();
    for(let i in allData){
      let  d = new Date(allData[i]['日期']).getTime();
      if((ST<=d)&&(ET>=d)){
        allData[i].SEARR = [ST,ET]
        data.push(allData[i])
      }
    }
    let classifyData =  this.getClassifiedstatistics(data)
    
    this.setState({
      classifyData:classifyData
    })
  };

  // 排序
  compare = (property)=>{
      return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return Number(value2) - Number(value1);
      }
  };

  // 事件分类
  getClassifiedstatistics = (data)=>{
    
    let keyArr = []
    let strAll = []
    let classifyData = []
    let otherData = []

    for(let i in data){
      let str = String(data[i]["方案描述"]).replace(/(^\s*)|(\s*$)/g, "")
      if(str&&(str.indexOf('+') !== -1)){
        let str1 = (str.slice(0,str.indexOf('+'))).replace(/(^\s*)|(\s*$)/g, "");
        keyArr.push(str1)
        strAll.push(str)
      }else{
        otherData.push(data[i])
      }
    }

    keyArr.push("其他操作")
    keyArr =  Array.from(new Set(keyArr))
    
    for(let j in keyArr){
      classifyData.push(
        {
          type:'classify',
          key:keyArr[j],
          classify:keyArr[j],
          classifyNum:'',
          classifyDesc:[],
          SEARR:data[0]?data[0].SEARR:[]
        }
      )
    }

    for(let i in strAll){
      for(let j in classifyData){
       let str =  String(strAll[i]).replace(/(^\s*)|(\s*$)/g, "")
        let str1 = (str.slice(0,str.indexOf('+'))).replace(/(^\s*)|(\s*$)/g, "");
        if(String(classifyData[j].classify) === String(str1)){
          classifyData[j].classifyNum = (classifyData[j].classifyNum || 0) + 1
          let str2 = strAll[i].slice(strAll[i].indexOf('+')+1);
          classifyData[j].classifyDesc.push(str2)  
        }
      }
    }

    // 把方案描述为空的归入其他操作
    for(let m in classifyData){
      if(classifyData[m].classify === "其他操作"){
        classifyData[m].classifyNum = (classifyData[m].classifyNum || 0) + otherData.length
      }
    }
    
    classifyData =  classifyData.sort(this.compare('classifyNum'))
    return classifyData
  };

  // 总数据
  getKey = (data) => {
    
    let yearKey  = []
    let dateKey = []
   
    for(let i in data){

      let  d = new Date(data[i]['日期']);
      yearKey.push(d.getFullYear())
      dateKey.push(data[i]['日期'])
    }

    dateKey = Array.from(new Set(dateKey))
    yearKey = Array.from(new Set(yearKey))

    let yearData = {}
    let yearMap = {}

    for(let j in yearKey){
      yearData[yearKey[j]] = []
      yearMap[yearKey[j]] = {
        January:'',
        February:'',
        March:'',
        April:'',
        May:'',
        June:'',
        July:'',
        August:'',
        September:'',
        October:'',
        November:'',
        December:'',
      }
    }

    for(let i in data){
      let  d = new Date(data[i]['日期']);
      for(let j in yearKey){
          if(d.getFullYear() === yearKey[j]){
            yearData[yearKey[j]].push(data[i])
          }
      }
       
    }
    
    for(let i in yearData){
      for(let j in yearData[i]){
        let  d = new Date(yearData[i][j]['日期']);
        yearMap[i][monthTokey[d.getMonth() + 1]] = (yearMap[i][monthTokey[d.getMonth() + 1]] || 0) + 1
      }
    }

    let tatoldata = []

    for(let i  in yearMap){
      yearMap[i]['year'] = `${i} 工单总数`
      yearMap[i].date = `${i}`
      yearMap[i].type = `year`
      tatoldata.unshift(yearMap[i])
    }

    for(let i in tatoldata){
      tatoldata[i].key = i
      let Achain = tatoldata[i][this.state.ydChain] || 0
      let nextKey = monthTokey[Number(keyTomonth[this.state.ydChain])+1]
      let Bchain = tatoldata[i][nextKey] || 0
      let res = '0.00'
      if(Achain){
        res = Number(((Number(Bchain)-Number(Achain))/Number(Achain))*100).toFixed(2)
      }
     
      tatoldata[i].chainComparison = `${res} %`
    }
    
    this.setState({
      tatoldata: tatoldata,
      yearKey:yearKey,
      totalInitstart:Math.min(...yearKey),
      totalInitend:Math.max(...yearKey)
    })

  }

  // 年环比
  yearChainchange = (value)=>{
    let tatoldata = this.state.tatoldata
    if(tatoldata.length === 0){
      message.error(`表格数据为空`);
      return
    }
    for(let i in tatoldata){
      let Achain = tatoldata[i][value] || 0
      let nextKey = monthTokey[Number(keyTomonth[value])+1]
      let Bchain = tatoldata[i][nextKey] || 0
      let res = '0.00'
      if(Achain){
        res = Number(((Number(Bchain)-Number(Achain))/Number(Achain))*100).toFixed(2)
      }
     
      tatoldata[i].chainComparison = `${res} %`
    }
    this.setState({
      tatoldata,
      ydChain:value
    })
  };

  //月度数据(时间选择)
  yearChangetime = (date, dateString) =>{

    if(!dateString){
     
      let tabData = []
      this.setState({
        eventData: tabData,
        yearTitle:'月度统计'
      })
      return
    }

    let allData = this.state.allData
    let  d = new Date(dateString);
    let year = d.getFullYear()
    let res = []
    let resKey = JSON.parse(JSON.stringify(this.state.actionType))
    let keyMap = {}
    let tabData = []

    // 筛选出所选年份数据
    for(let i in allData){
      let  d = new Date(allData[i]['日期']);
      if(year === d.getFullYear()){
        
        res.push(allData[i])
      }
    }
    
    // 给每个类型加12个月份的空数据
    for(let i in resKey){

      keyMap[resKey[i]] = {
        January:'',
        February:'',
        March:'',
        April:'',
        May:'',
        June:'',
        July:'',
        August:'',
        September:'',
        October:'',
        November:'',
        December:'',
      }

    }
    
    // 把数据源的月份与上面的月份对应，进行统计
    for(let j in res){
      let  d = new Date(res[j]['日期']);
      let m = d.getMonth() + 1
      for(let i in keyMap){
        for(let h in keyMap[i]){
          if((m === Number(keyTomonth[h]))&&(i === res[j]['影响分类'])){
            keyMap[i][h] =  (keyMap[i][h] || 0) + 1
          }
        }
      }
    }
   
    // 处理添加表格数据
    for(let m in keyMap){
      keyMap[m].key = m
      keyMap[m]['year'] = m
      keyMap[m]['date'] = `${year}`
      keyMap[m].type = `month`
      tabData.push(keyMap[m])
    }

    // 数据处理月份key成表格的字段
    for(let i in tabData ){
      for(let j in tabData[i]){
        if(monthTokey[Number(j)+1]){
          tabData[i][monthTokey[Number(j)+1]] = tabData[i][j]
        }
      }
    }

    for(let i in tabData){
      let Achain = tabData[i][this.state.mdChain] || 0
      let nextKey = monthTokey[Number(keyTomonth[this.state.mdChain])+1]
      let Bchain = tabData[i][nextKey] || 0
      let res = '0.00'
      if(Achain){
        res = Number(((Number(Bchain)-Number(Achain))/Number(Achain))*100).toFixed(2)
      }
      tabData[i].chainComparison = `${res} %`
    }
    
    this.setState({
      eventData: tabData,
      yearTitle:`${year}年月度统计`
    })

  };

  // 月环比
  monthChainchange = (value)=>{
    
    let eventData = this.state.eventData
    if(eventData.length === 0){
      message.error(`表格数据为空`);
      return
    }
    for(let i in eventData){
      let Achain = eventData[i][value] || 0
      let nextKey = monthTokey[Number(keyTomonth[value])+1]
      let Bchain = eventData[i][nextKey] || 0
      let res = '0.00'
      if(Achain){
        res = Number(((Number(Bchain)-Number(Achain))/Number(Achain))*100).toFixed(2)
      }
      eventData[i].chainComparison = `${res} %`
    }
    this.setState({
      eventData,
      mdChain:value
    })
  };

  //月份天数数据(时间选择)
  monthChange = (date, dateString) =>{

    if(!dateString){
      let dayscolumnsMap = []
      let tabData = []
      this.setState({
        dayscolumns: dayscolumnsMap,
        monthData:tabData,
        monthTitle:'月份统计'
      })
      return
    } 
    let  d = new Date(dateString);
    let year = d.getFullYear()
    let month = d.getMonth() + 1
    let num = this.getMonthDays(year,month)
    let dayscolumnsMap = []
    let allData = this.state.allData
    let resKey = JSON.parse(JSON.stringify(this.state.actionType))
    let res = []
    let keyMap = {}
    let tabData = []

    dayscolumnsMap.push({
      title: '',
      dataIndex: 'month',
      fixed: 'left',
      width: 150,
      render: (text, row, index) => {
        return<div className="blue-color" onClick={()=>{this.dialogTable(row,index,0)}} >{text}</div>;
      },
    })
    
    // 生成头部表格字段
    for (let index = 0; index < num; index++) {
      let indexNum = index+1
      dayscolumnsMap.push({
        title: `${month}/${indexNum}`,
        dataIndex: indexNum,
        align:'center',
        width: 80,
        render: (text, row, index) => {
          return <div className="blue-color" onClick={()=>{this.dialogTable(row,index,indexNum)}}>{text}</div>;
        },
      })
    }

    dayscolumnsMap.push({
      title: '总计',
      dataIndex: 'total',
      fixed: 'right',
      align:'center',
      width: 80,
    })


    // 筛选出所选年月数据
    for(let i in allData){
      let  ad = new Date(allData[i]['日期']);
      let ayear = ad.getFullYear()
      let amonth = ad.getMonth() + 1
      if((year === ayear)&&(amonth === month)){
        res.push(allData[i])
      }
    }

    // 给每个类型加所选月的天数
    for(let i in resKey){
      keyMap[resKey[i]] = {}
      for(let j in dayscolumnsMap){
        keyMap[resKey[i]][Number(j)+1] = ""
      }
    }

    // 把数据源的天与上面的天对应，进行统计
    for(let j in res){
      let  d = new Date(res[j]['日期']);
      let ds = d.getDate()
      for(let i in keyMap){
        for(let h in keyMap[i]){
          if((ds === Number(h))&&(i === res[j]['影响分类'])){
            keyMap[i][h] =  (keyMap[i][h] || 0) + 1
          }
        }
      }
    }

    // 处理添加表格数据
    for(let m in keyMap){
      keyMap[m].key = m
      keyMap[m]['month'] = m
      keyMap[m]['date'] = `${year}-${month}`
      keyMap[m].type = `days`
      tabData.push(keyMap[m])
    }
    
    for(let i in tabData){
      let total = 0
      for(let j in tabData[i]){
        if(/^[0-9]+.?[0-9]*/.test(tabData[i][j])){
          total += Number(tabData[i][j]) || 0
        }
      }
      tabData[i].total = total
    }
    
    this.setState({
      dayscolumns: dayscolumnsMap,
      monthTitle:`${year}-${month}月份统计`,
      monthData:tabData
    })
  };

  //选择展示图
  checkboxChange = (checkedValues) =>{
    this.setState({
      checkedValues: checkedValues
    });
  };

  //选择时间类型
  radioChange = (e)=>{
    
    this.setState({
      radioValue: e.target.value,
      piePicker:['','']
    });
  };

  // 图形时间选择
  pieSearchtime = (date, dateString)=>{
    this.setState({
      piePicker: dateString
    });
  };

  // 图形
  getOption = (data,type) =>{

    let res = {}
    let pieData = data.data
    let textColor = {
      "-graphical":'#fff',
      "-list":'#000'
    } 
    switch (data.key) {
      
        
        case `line${type}`:

          for(let i in pieData[3]){
            pieData[3][i].label =  {
                      normal: {
                          show: true,
                          position: 'top',
                          textStyle: {
                            color: textColor[type]
                          }
                      }
                }
          }
          res = {
            title: {
              text: '折线',
              textStyle:{
                color: textColor[type]
              }
            },
            tooltip: {},
            legend: {
              data:pieData[1],
              textStyle: {
                fontSize: '12',
                  color:textColor[type]
              }
            },
            xAxis: {
              data: pieData[2],
              axisLabel: {
                textStyle: {
                  fontSize: '12',
                    color: textColor[type]
                }
              },
            },
            yAxis: {
              axisLabel: {
                textStyle: {
                  fontSize: '12',
                   color: textColor[type]
                }
              },
              type:'value'
            },
            series: pieData[3]
        }

        break;
       
        case `pie${type}`:
          let resData =  pieData[3]

          for(let i in  resData){

            const sum = (...arr) => [].concat(...arr).reduce((acc, val) => Number(acc) + Number(val), 0);
            resData[i].value = sum(resData[i].data); 

          }
         
          res = {
            title : {
              text: '饼图',
              textStyle:{
                color: textColor[type]
              }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                top: 'top',
                data: pieData[1],
                textStyle: {
                  fontSize: '12',
                    color:textColor[type]
                }
            },
            series : [
                {
                  name: '反馈统计',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data: resData,
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                      normal : {
                        label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                  color: textColor[type]
                            }
                         }
                      },
                  }
                }
            ]
          }
        break;

        case `piecircular${type}`:

          let resCircular =  pieData[3]

          for(let i in  resCircular){

            const sum = (...arr) => [].concat(...arr).reduce((acc, val) => Number(acc) + Number(val), 0);
            resCircular[i].value = sum(resCircular[i].data); 

          }

          res = {
            title: {
              text: '环形',
              textStyle:{
                color: textColor[type]
              }
          },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                  fontSize: '12',
                    color:textColor[type]
                }
            },
            series: [
                {
                    name: '反馈统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold',
                            textStyle: {
                                  color: textColor[type]
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: resCircular
                }
            ]
        };
        break;

        case `bar${type}`:
          
        for(let i in pieData[3]){
            pieData[3][i].label =  {
                      normal: {
                          show: true,
                          position: 'top',
                          textStyle: {
                            color: textColor[type]
                          }
                      }
                }
          }
          res = {
              title: {
                text: '柱形',
                textStyle:{
                  color: textColor[type]
                }
              },
              tooltip: {},
              legend: {
                data: pieData[1],
                textStyle: {
                  fontSize: '12',
                    color:textColor[type]
                }
              },
              yAxis: {
                axisLabel: {
                  textStyle: {
                    fontSize: '12',
                     color: textColor[type]
                  }
                },
              },
              xAxis: {
                data: pieData[2],
                axisLabel: {
                  textStyle: {
                    fontSize: '12',
                     color: textColor[type]
                  }
                },
              },
              series: pieData[3]
          }
        break;
        
        case `piearea${type}`:
         
          for(let i in pieData[3]){
            pieData[3][i].type = 'line'
            pieData[3][i].smooth = true
            pieData[3][i].areaStyle= {}
            pieData[3][i].label =  {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: textColor[type]
                    }
                }
          }
          }
          res = {
            title: {
              text: '曲面',
              textStyle:{
                color: textColor[type]
              }
            },
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data: pieData[1],
              textStyle: {
                fontSize: '12',
                 color:textColor[type]
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: pieData[2],
              axisLabel: {
                textStyle: {
                  fontSize: '12',
                   color: textColor[type]
                }
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                textStyle: {
                  fontSize: '12',
                  color: textColor[type]
                }
              },
            },
            series: pieData[3]       
          }
        break;

        case `barline${type}`:
          // {
          //   tooltip: {
          //       trigger: 'axis',
          //       axisPointer: {
          //           type: 'cross',
          //           crossStyle: {
          //               color: '#999'
          //           }
          //       }
          //   },
          //   toolbox: {
          //       feature: {
          //           dataView: {show: true, readOnly: false},
          //           magicType: {show: true, type: ['line', 'bar']},
          //           restore: {show: true},
          //           saveAsImage: {show: true}
          //       }
          //   },
          //   legend: {
          //       data: ['蒸发量', '降水量', '平均温度']
          //   },
          //   xAxis: [
          //       {
          //           type: 'category',
          //           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          //           axisPointer: {
          //               type: 'shadow'
          //           }
          //       }
          //   ],
          //   yAxis: [
          //       {
          //           type: 'value',
          //           name: '水量',
          //           min: 0,
          //           max: 250,
          //           interval: 50,
          //           axisLabel: {
          //               formatter: '{value} ml'
          //           }
          //       },
          //       {
          //           type: 'value',
          //           name: '温度',
          //           min: 0,
          //           max: 25,
          //           interval: 5,
          //           axisLabel: {
          //               formatter: '{value} °C'
          //           }
          //       }
          //   ],
          //     series: [
          //         {
          //             name: '蒸发量',
          //             type: 'bar',
          //             data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          //         },
          //         {
          //             name: '降水量',
          //             type: 'bar',
          //             data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          //         },
          //         {
          //             name: '平均温度',
          //             type: 'line',
          //             yAxisIndex: 1,
          //             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          //         }
          //     ]
          // }
          let pieDataline = []
          let pieDatabar = []
          for(let i in pieData[3]){
            pieData[3][i].type = 'line'
           
            pieDataline.push(pieData[3][i])
          }

          for(let j in pieData[3]){
            pieData[3][j].type = 'bar'
            pieDatabar.push(pieData[3][j])
          }

          pieData[3] = pieDatabar.concat(pieDataline)
         
          res = {
              title: {
                  text: '柱折图'
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              toolbox: {
                  feature: {
                      dataView: {show: true, readOnly: false},
                      magicType: {show: true, type: ['line', 'bar']},
                      restore: {show: true},
                      saveAsImage: {show: true}
                  }
              },
              legend: {
                  data: pieData[1]
              },
              xAxis: [
                  {
                      type: 'category',
                      data: pieData[2],
                      axisPointer: {
                          type: 'shadow'
                      }
                  }
              ],
              yAxis: [{
                type: 'value',
                name: '数量',
                min: 0,
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: pieData[3]
          }
        break;

        case `linearea${type}`:
          for(let i in pieData[3]){
            pieData[3][i].type = 'line'
            pieData[3][i].areaStyle= {}
            pieData[3][i].label =  {
                  normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                        color: textColor[type]
                      }
                  }
            }
          }
          
          res = {
              title: {
                text: '折面',
                textStyle:{
                  color: textColor[type]
                }
              },
              tooltip: {},
              legend: {
                data: pieData[1],
                textStyle: {
                  fontSize: '12',
                   color:textColor[type]
                }
              },
              yAxis: {
                axisLabel: {
                  textStyle: {
                    fontSize: '12',
                     color: textColor[type]
                  }
                },
              },
              xAxis: {
                data: pieData[2],
                axisLabel: {
                  textStyle: {
                    fontSize: '12',
                     color: textColor[type]
                  }
                },
              },
              series: pieData[3]
          }
        break;
       
      default:
      
      break;
    }
    return res;
  };

  // 获取两个日期之间的所有日期
  getDayAll = (starDay, endDay) =>{
      
  　　 let arr = [];
      let [ydates,mdates,ddates] = [[],[],[]];

      // 设置两个日期UTC时间
  　　　let db = new Date(starDay);
  　　　let de = new Date(endDay);
  
      // 获取两个日期GTM时间
  　　　let s = db.getTime() - 24 * 60 * 60 * 1000;
  　　　let d = de.getTime() - 24 * 60 * 60 * 1000;
  
      // 获取到两个日期之间的每一天的毫秒数
  　　　for (var i = s; i <= d;) {
  　　　　i = i + 24 * 60 * 60 * 1000;
          arr.push(parseInt(i))
  　　　}
      
      // 获取每一天的时间  YY-MM-DD
      for( let j in arr ){
          let time = new Date(arr[j]);
          let year = time.getFullYear(time);
          let mouth = (time.getMonth() + 1)>=10?(time.getMonth() + 1):('0'+(time.getMonth() + 1));
          let day = time.getDate()>=10?time.getDate():('0'+time.getDate());
          let YY = year;
          let YYMM = `${year}-${mouth}`;
          let YYMMDD = `${year}-${mouth}-${day}`;
          ydates.push(YY)
          mdates.push(YYMM)
          ddates.push(YYMMDD)
      }
      
      return [
        Array.from(new Set(ydates)),
        Array.from(new Set(mdates)),
        ddates
      ]
  };

  //根据日期过滤数据
  getResdata = (data,type, pieType)=>{

    let allData = this.state.allData
    let res  = []
    let s = new Date(data[0]).getTime()
    let e = new Date(data[1]).getTime()
    let resKey = JSON.parse(JSON.stringify(this.state.actionType))
    
    for(let i in allData){
      let  d = new Date(allData[i]['日期']).getTime()
      if((d>=s)&&(d<=e)){
        res.push(allData[i])
      }
    }

    let timeData = this.getDayAll(data[0],data[1])

    let [dataMap] = [{}]

    if(type === 'month'){

      for(let i in resKey){
        dataMap[resKey[i]] = {}
          for(let j in timeData[1]){
          dataMap[resKey[i]][timeData[1][j]] = 0
        }
      }
  
      for(let i in timeData[1]){
        for(let j in res){
          let d = new Date(res[j]['日期'])
          let  m = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`
          let  x = res[j]['影响分类']
          for(let h in resKey){
            if((String(m) === String(timeData[1][i]))&&(String(x) === String(resKey[h]))){
              dataMap[resKey[h]][timeData[1][i]] = dataMap[resKey[h]][timeData[1][i]] + 1
            }
          }
        
        }
      }

    }else if(type === 'days'){

      
       
      for(let i in resKey){
          dataMap[resKey[i]] = {}
          for(let m in timeData[2]){
            dataMap[resKey[i]][timeData[2][m]] = 0
          }
      }
  
      for(let i in timeData[2]){
        for(let j in res){
          let d = new Date(res[j]['日期'])
          let  ds = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
          let  x = res[j]['影响分类']
          for(let h in resKey){
            if((String(ds) === String(timeData[2][i]))&&(String(x) === String(resKey[h]))){
              dataMap[resKey[h]][timeData[2][i]] = dataMap[resKey[h]][timeData[2][i]] + 1
            }
          }
        
        }
      }
    }else{
        
      for(let i in resKey){
          dataMap[resKey[i]] = {}
          for(let h in timeData[0]){
          dataMap[resKey[i]][timeData[0][h]] = 0
        }
      }

      for(let i in timeData[0]){

        for(let j in res){
          let  y = new Date(res[j]['日期']).getFullYear()
          let  x = res[j]['影响分类']
          for(let m in resKey){
            if((Number(y) === Number(timeData[0][i]))&&(String(x) === String(resKey[m]))){
              dataMap[resKey[m]][timeData[0][i]] = dataMap[resKey[m]][timeData[0][i]] + 1
            }
          }
        
        }
      
      }

    }
  
    let legendKey = Object.keys(dataMap)
    let xAxisKey = []
    let seriesData = []

    for(let i in dataMap){
      let datas = Object.entries(dataMap[i])
      let data = []
      for(let j in datas){
        xAxisKey.push(datas[j][0])
        data.push(datas[j][1])
      }
      seriesData.push({
        name: i,
        type: pieType ||'bar',
        data: data || []
      })

    }
    
    return [res,legendKey,Array.from(new Set(xAxisKey)),seriesData]
  };

  // 横轴类型
  pieTypeChange = (e)=>{
    this.setState({
      pieTypevalue: e.target.value
    });
  };

  // 查询图形
  searchPie = () => {
   
    let cArr = this.state.checkedValues
    let dType = this.state.radioValue
    let sTime = this.state.piePicker[0]
    let eTime = this.state.piePicker[1]
    let rArr = []
    let optionArray = []
    
   if(cArr.length === 0){

      message.error(`至少选择一种图形进行查询`);
      return
    }else  if(!sTime&&!eTime){
      
      message.error(`请选择日期范围进行查询`);
      return
    } 
    
    let  s = new Date(sTime);
    let  e = new Date(eTime);
    switch (dType) {

      case 'month':
        let sm = `${s.getFullYear()}-${String(s.getMonth()+1).padStart(2,'0')}` 
        let em = `${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,'0')}`
        let de = this.getMonthDays(e.getFullYear(),String(e.getMonth()+1).padStart(2,'0'))
        
        for(let i in cArr){
          let resarrm = this.getResdata([`${sm}-01`,`${em}-${de}`],'month',cArr[i])
          rArr.push({
            key: `${cArr[i]}-list`,
            isShow: true,
            data: resarrm
          })
          optionArray.push({
            key: `${cArr[i]}-graphical`,
            data:resarrm
          })
        }


      break;

      case 'days':
        let sd = `${s.getFullYear()}-${String(s.getMonth()+1).padStart(2,'0')}-${String(s.getDate()).padStart(2,'0')}` 
        let ed = `${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,'0')}-${String(e.getDate()).padStart(2,'0')}` 
        for(let i in cArr){
          let resarrd = this.getResdata([sd,ed],'days',cArr[i]) 
          rArr.push({
            key: `${cArr[i]}-list`,
            isShow: true,
            data: resarrd
          })
          optionArray.push({
            key: `${cArr[i]}-graphical`,
            data:resarrd
          })
        }

      break;
  
      default:

        let sy = s.getFullYear()
        let ey = e.getFullYear()
        let res = (sy === ey)?[`${sy}-01-01`,`${ey}-12-31`]:[`${sy}-01-01`,`${ey}-12-31`]
        
        for(let i in cArr){
          let resarry  = this.getResdata(res,'year',cArr[i])
          rArr.push({
            key: `${cArr[i]}-list`,
            isShow: true,
            data: resarry
          })
          optionArray.push({
            key: `${cArr[i]}-graphical`,
            data: resarry
          })
        }

      break;

    }
    let resOption = []
    for(let i in optionArray){
      resOption.push(this.getOption(optionArray[i],'-graphical'))
    }
    
    this.setState({
      pieArray:rArr,
      optionArray: resOption
    })
    
  };

  //图形收起
  pieClick = (index)=>{
    
    let pieArray = this.state.pieArray
    pieArray[index].isShow = !pieArray[index].isShow
    
    this.setState({
      pieArray
    });
  };

  // 获取labelName
  getLabel = (key)=>{
    
    let res = this.state.plainOptions
    let str = ''
    for(let i in res){
      if(res[i].value === key){
        str = res[i].label
      }
    }
    return str
  };

  // 排列
  switchChange = (checked,e)=>{
    this.setState({
      ColNum:(checked?24:12)
    })
  };

  // 全屏
  fullscreen = (key)=>{
    
    this.setState({
      screenTags: key
    });
  };

  // 过滤出弹窗数据
  getTabledata = (type,date,key,Arrd,colIndex)=>{
    let allData = this.state.allData
    let res = []
    for(let i in allData){
      let  ad = new Date(allData[i]['日期']);
      let year = ad.getFullYear()
      let month = ad.getMonth() + 1 
      let day = ad.getDate()
      
      switch (type) {
        case 'year':
          if(String(date) ===  String(`${year}-${month}`)){
            res.push({
              key:`${type}${i}`,
              date:allData[i]['日期'],
              classification:allData[i]['影响分类'],
              title:allData[i]['标题'],
              desc:allData[i]['方案描述']
            })
          }
          break;
        case 'month':
          let monthtag = colIndex === 0?(String(date) === String(`${year}`)):(String(date) === String(`${year}-${month}`))
          if(monthtag&&(key === allData[i]['影响分类'])){
            res.push({
              key:`${type}${i}`,
              date:allData[i]['日期'],
              classification:allData[i]['影响分类'],
              title:allData[i]['标题'],
              desc:allData[i]['方案描述']
            })
          }
            break;
        case 'days':
          let daystag = (colIndex === 0)?(String(date) === String(`${year}-${month}`)):(String(date) === String(`${year}-${month}-${day}`))
          if(daystag&&(key === allData[i]['影响分类'])){
            res.push({
              key:`${type}${i}`,
              date:allData[i]['日期'],
              classification:allData[i]['影响分类'],
              title:allData[i]['标题'],
              desc:allData[i]['方案描述']
            })
          }
        break;
        case 'classify':
            let str =  String(allData[i]['方案描述']).replace(/(^\s*)|(\s*$)/g, "");
            //let strKey = str&&(str.indexOf('+') !== -1)&&(str.slice(0,str.indexOf('+'))).replace(/(^\s*)|(\s*$)/g, "");
            let d = ad.getTime();
            if((Arrd[0]<=d)&&(Arrd[1]>=d)){
              let keyStr = `${key}+`
              let reg =  str.indexOf(keyStr)
              if(str&&(reg === 0)){
                res.push({
                  key:`${type}${i}`,
                  date:allData[i]['日期'],
                  classification:allData[i]['影响分类'],
                  title:allData[i]['标题'],
                  desc:allData[i]['方案描述']
                })
               
              }else if((key === "其他操作")&&((reg === 0)  || (!str) || (!str.includes("+")))){
                res.push({
                  key:`${type}${i}`,
                  date:allData[i]['日期'],
                  classification:allData[i]['影响分类'],
                  title:allData[i]['标题'],
                  desc:allData[i]['方案描述']
                })
              }
            }
           
            break;
        default:
        break;
      }
    }
   
    if(colIndex === 0){

      let [keyArr,hData,otherData] = [[],[],[]];

      for(let i in res){
        let str = String(res[i].desc).replace(/(^\s*)|(\s*$)/g, "")
        if(str&&(str.indexOf('+') !== -1)){
          let str1 = (str.slice(0,str.indexOf('+'))).replace(/(^\s*)|(\s*$)/g, "");
          res[i].descKey = str1
          keyArr.push(str1)
        }else{
          otherData.push(res[i]);
        }
      }

      if(res.length){
        keyArr.push("其他操作");
      }
      
      keyArr =  Array.from(new Set(keyArr));
      for(let j in keyArr){
        hData.push({
          key:`child_${j}`,
          date:"",
          classification:"",
          classifChild:keyArr[j],
          classifChildNum:""
        })
      }
      for(let j in hData){

        for(let i in res){
          if(res[i].descKey === hData[j].classifChild){
              hData[j].date = res[i].date
              hData[j].classification = res[i].classification
              hData[j].classifChildNum = Number(hData[j].classifChildNum || 0) + 1
          }
        }

        if(hData[j].classifChild === "其他操作"){
          hData[j].date = "无固定日期"
          hData[j].classification = res.length?res[0].classification:""
          hData[j].classifChildNum = Number(hData[j].classifChildNum || 0) + Number(otherData.length)
        }
      }
      hData =  hData.sort(this.compare('classifChildNum'))
      res = hData 
    }else {
      res = res.sort(this.compare('date'))
    }
    return res
  };

  // 弹窗分页重置
  paginationChange = (page, pageSize)=>{
    this.setState({
      paginationCurrent: page,
      paginationpageSize:pageSize
    });
  };

  // 弹窗
  dialogTable = (row,index,colIndex)=>{
    
    let {type, date, key,SEARR} = row 
    let Arrd = SEARR?[SEARR[0],SEARR[1]]:[]
    let d = date?((colIndex === 0) ? date :`${date}-${colIndex}`) : key
    let resData =  this.getTabledata(type,d,key,Arrd,colIndex)

    //日期、影响分类、标题、方案描述
    const modelColums = [{
      title: '日期',
      dataIndex: 'date',
      align:'center',
      width: 150,
      ...this.getColumnSearchProps('date','日期')
    },{
      title: '影响分类',
      dataIndex: 'classification',
      align:'center',
      width: 150,
      ...this.getColumnSearchProps('classification','影响分类'),
    },{
      title: '标题',
      dataIndex: 'title',
      align:'center',
      width: 300,
      ...this.getColumnSearchProps('title','标题'),
    },{
      title: '方案描述',
      dataIndex: 'desc',
      align:'center',
      width: 300,
      ...this.getColumnSearchProps('desc','方案描述'),
    }]

    if(colIndex === 0){
      modelColums.splice(2,2,{
        title: '事件分类',
        dataIndex: 'classifChild',
        align:'center',
        width: 300,
        ...this.getColumnSearchProps('classifChild','事件分类'),
      },{
        title: '事件统计',
        dataIndex: 'classifChildNum',
        align:'center',
        width: 300,
        ...this.getColumnSearchProps('classifChildNum','事件统计'),
      });
    }
    
    this.setState({
      paginationCurrent:1,
      paginationpageSize:10,
      classificationValue:"",
      titleValue:"",
      descValue:"",
      searchText:'',
      modalTitle: (colIndex === 0)?key:d,
      visible: true,
      modalTabledata:resData,
      modelColums:modelColums
    });
  };

  //hideModal
  hideModal = () =>{
    this.setState({
      visible: false,
    });
  };

  // 弹窗表格列搜索
  getColumnSearchProps = (dataIndex,text) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`输入查询的 【${text}】`}
          value={this.state[`${dataIndex}Value`]}
          onChange={e =>{
            setSelectedKeys(e.target.value ? [e.target.value] : [])
            let map = {}
            map[`${dataIndex}Value`] = e.target.value
            this.setState(map);
          } }
          onPressEnter={() => this.handleSearch([this.state[`${dataIndex}Value`]], confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch([this.state[`${dataIndex}Value`]], confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            查询
          </Button>
          <Button onClick={() => this.handleReset(clearFilters,dataIndex)} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered =>{
      let v = this.state[`${dataIndex}Value`]?true:false
      return <SearchOutlined className="search-icon" style={{ color: (filtered&&v)? '#1890ff' : undefined }} />
    } ,
    onFilter: (value, record) =>{
      let v = (this.state[`${dataIndex}Value`])?true:false;
      return v?(record[dataIndex]? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()): ''):record
    },
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: text =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

  // 搜索
  handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex
    });
  };

  // 重置
  handleReset = (clearFilters,dataIndex) => {
    clearFilters();
    let map = {searchText: ''}
    map[`${dataIndex}Value`] = ""
    this.setState(map);
  };

  // 下载模板
  downDome = ()=>{
    window.open(`https://qiniu.lanlianjiu.xyz/dome.xls`) ; 
  };

  render() {
    
    return (

      <div className="warp" style={this.state.screenTags?pieBg:null}>

        <Spin spinning={this.state.uploaLoading}  delay={500} tip="正在上传...">

          {
            (!this.state.screenTags)?<>   
              <div className="header-warp" >
                <div className="upload-body">
                  <label className="upload-btn">
                      <div>
                        <UploadOutlined type='UploadOutlined' />
                      </div>
                      <div>
                        点击上传
                      </div>
                      <input  className="upload-file" type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
                  </label>
                  <div className="upload-tip">支持 .xlsx、.xls 格式的文件</div>
                </div>
                <div className="blue-color down-box" onClick={()=>{this.downDome()}}>下载模板</div>
              </div>

              <div className="content-warp">
                <Collapse defaultActiveKey={['1','2','3','4']}  expandIconPosition="right" onChange={this.collapseCollapse}>
                  
                  <Panel header={this.state.collapseArr.includes('1')?"*":"【年度】统计"} key="1" className="panel-body">
                    <div className="table-box">
                        <div className="pic-body">
                          <div className="pic-title">{`${this.state.totalInitstart}
                          ${this.state.totalInitstart?'-':''}
                          ${this.state.totalInitend}
                          ${this.state.totalTitle}`}</div>
                          <RangePicker onChange={this.totalSearchtime} 
                          picker="year" />
                          <div className="pic-title">环比</div>
                          <div>
                          <Select defaultValue="January" 
                          style={{ width: 120 }} 
                          placeholder="请选择"
                          onChange={this.yearChainchange}>
                            {
                              childrenChain
                            }
                          </Select>
                          </div>
                        </div>
                        <Table columns={this.monthcolumnsFn(1)} 
                        dataSource={this.state.tatoldata} 
                        bordered 
                        pagination={false}
                        />
                    </div>
                  </Panel>
                  
                  <Panel header={this.state.collapseArr.includes('2')?"*":"【年度】-【月份】统计"}  key="2" className="panel-body">
                    <div className="table-box">
                      <div className="pic-body">
                        <div className="pic-title">{this.state.yearTitle}</div>
                        <DatePicker onChange={this.yearChangetime} picker="year" />
                        <div className="pic-title">环比</div>
                        <div>
                          <Select defaultValue="January" 
                          style={{ width: 120 }} 
                          placeholder="请选择"
                          onChange={this.monthChainchange}>
                          {childrenChain}
                          </Select>
                          </div>
                      </div>
                      
                      <Table columns={this.monthcolumnsFn()} 
                      dataSource={this.state.eventData}
                      bordered 
                      pagination={false}
                      />
                    </div>
                  </Panel>
                  
                  <Panel header={this.state.collapseArr.includes('3')?"*":"【月份】-【天数】统计"}  key="3" className="panel-body">
                    <div className="table-box">
                      <div className="pic-body">
                        <div className="pic-title">{this.state.monthTitle}</div>
                        <DatePicker onChange={this.monthChange} picker="month" />
                      </div>
                    
                      <Table columns={this.state.dayscolumns} 
                      pagination={false}
                      dataSource={this.state.monthData} 
                      bordered  
                      scroll={{ x: 1000 }} 
                      sticky/>
                    </div>
                  </Panel>

                  <Panel header={this.state.collapseArr.includes('4')?"*":"分类统计"}  key="4" className="panel-body">
                    <div className="table-box">
                    < div className="pic-body">
                        <div className="pic-title">分类统计</div>
                        <RangePicker onChange={this.rangePickerChange} picker="month" />
                      </div>
                      <Table columns={this.state.classifyColumns} 
                      dataSource={this.state.classifyData} 
                      bordered  
                      scroll={{ x: 1000 }} 
                      sticky
                      summary={pageData => {
                        let totalClassifyNum = 0;
                        pageData.forEach(({ classifyNum }) => {
                          totalClassifyNum += classifyNum;
                        });
                
                        return (
                          <>
                            <Table.Summary.Row>
                              <Table.Summary.Cell >总计</Table.Summary.Cell>
                              <Table.Summary.Cell>
                                <Text type="danger">{totalClassifyNum}</Text>
                              </Table.Summary.Cell>
                              <Table.Summary.Cell>
                                <Text></Text>
                              </Table.Summary.Cell>
                            </Table.Summary.Row>
                          </>
                        );
                      }}
                      />
                    </div>
                  </Panel>

              </Collapse>
              </div>
            </>:null
          } 

          <div className="pie-body" >

              <div className={(!this.state.screenTags)?'pie-header':'pd-header'}>

                <div className="pie-search">

                  <div  className={this.state.screenTags?'check-search screen-color':'check-search'}>
                    <div className="pie-type-label">
                      图形类型：
                    </div>
                    <Checkbox.Group options={this.state.plainOptions} 
                    defaultValue={['bar','line','pie','piecircular','piearea','linearea']} //'barline'
                    onChange={this.checkboxChange} />
                  </div>

                  {/* <div className="pie-type-box">
                    <div className="pie-type-label">
                      横轴类型：
                    </div>
                    <Radio.Group className="pie-type-radio" onChange={this.pieTypeChange} defaultValue={1}>
                      <Radio value={1}>时间</Radio>
                      <Radio value={2}>事件</Radio>
                    </Radio.Group>
                    
                  </div> */}

                  <div className="date-search">
                    <Radio.Group options={this.state.radioOptions} 
                    optionType="button" 
                    onChange={this.radioChange} 
                    value={this.state.radioValue} />
                    <RangePicker onChange={this.pieSearchtime} 
                    picker={(this.state.radioValue === 'days')?'':this.state.radioValue} />
                   
                  </div>

                  <div>
                    <Button type="primary" icon={<SearchOutlined />} onClick={this.searchPie}>
                      查询
                    </Button>
                  </div>
                  <div className="switch-box"> {this.state.screenTags?
                  <Switch className="switch-color" 
                  checkedChildren="竖排" unCheckedChildren="横排" 
                  defaultChecked 
                   onChange={this.switchChange}/>:""}</div>
                  <div className="enlarge">
                   {this.state.screenTags?<FullscreenExitOutlined onClick={()=>{this.fullscreen(false)}} 
                   style={{ fontSize: '26px', color: '#FFFFFF' }}/>
                   :<FullscreenOutlined onClick={()=>{this.fullscreen(true)}} style={{ fontSize: '26px', color: '#08c' }}/> } 
                  </div>

                </div>

              </div>

              <div className="pie-content">
             { (this.state.screenTags)?<Aechart optionArray={this.state.optionArray} ColNum={this.state.ColNum}/> :<>
                  {  
                    this.state.pieArray.map((item,index)=>{
                      return(
                      <div key={index} className="pie-box">
                        {(!item.isShow)?<div className="label-pie" >
                          {this.getLabel(item.key)}
                        </div>:''}
                        <div className={item.isShow?'rows':'rowh'}  onClick={()=>{this.pieClick(index)}}>
                        {item.isShow?<CaretDownOutlined />:<CaretUpOutlined />}
                        </div>
                        <ReactEcharts style={item.isShow?'':ReactEchartsStyle} 
                        className={['pie','piecircular'].includes(item.key)?'pie-height':''} 
                        option={this.getOption(item,'-list')}  />
                      </div>
                      ) 
                    })
                  }
                  
                 
                </>
              }
              { (
                  this.state.screenTags?(this.state.optionArray.length):this.state.pieArray.length
                )
                ? ''
                : <Result
                className={this.state.screenTags?'screen-color':''}
                title="点击【查询】展示数据"
                />
              }
            </div>

          </div>
        </Spin>
        <Modal
          title={this.state.modalTitle}
          width={1000}
          visible={this.state.visible}
          onCancel={this.hideModal}
          footer={null}
        >
         <div>
          <Table columns={this.state.modelColums} 
            dataSource={this.state.modalTabledata}
            pagination={{ current: this.state.paginationCurrent,pageSize:this.state.paginationpageSize,onChange:this.paginationChange  }}
            bordered 
            />
         </div>
        </Modal>
        <BackTop>
          <div style={style}>UP</div>
        </BackTop>
      </div>
    );
  }
}

export default Excel;
